<template>
  <div class="text-center sl-empty leading-snug">
    <div class="pt-2.5 pb-4.5">
      <Icon :type="icon || 'icon-kongzhuangtai'" class="sl-empty-icon" :style="iconStyle" />
    </div>
    <div v-if="description || defaultLocalKey" class="sl-empty-text text-color-main dark:text-color-secondary">
      {{ description || t(defaultLocalKey) }}
    </div>
    <slot v-else name="description"> </slot>
  </div>
</template>
<script lang="ts" setup>
import { useI18n } from "/@/locales/useI18n";
import Icon from "/@/components/Icon.vue";
import type { CSSProperties } from "vue";

const { t } = useI18n();
withDefaults(
  defineProps<{
    description?: string;
    defaultLocalKey?: string;
    icon?: string;
    iconStyle?: CSSProperties;
  }>(),
  {
    defaultLocalKey: "common.nodata",
  }
);
</script>

<style lang="less">
.sl-empty-icon {
  font-size: 100px;
}
.sl-empty-text {
  font-size: 16px;
}
.ant-select-item-empty,
.ant-select-dropdown-empty {
  .sl-empty-icon {
    font-size: 50px;
  }
  .sl-empty-text {
    font-size: 12px;
  }
}
</style>
